<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ApiRole, ApiUser } from "../../api";
import { Search } from "@element-plus/icons-vue";
import UserAdd from "./UserAdd.vue";
import UserConfigRole from "./UserConfigRole.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const list = ref<API.User.List>({
  user_name: "",
  role_id: -1,
  begin: 0,
  pageSize: 3,
});
const data = ref<PageResult<UI.List>>();
const roles = ref<UI.Role[]>();
const addRef = ref<InstanceType<typeof UserAdd>>();
const ConfigRoleRef = ref<InstanceType<typeof UserConfigRole>>();
onMounted(async () => {
  roles.value = await ApiRole.get();
  queryHandler();
});
const changePageHandler = async (currentPage: number, pageSize: number) => {
  list.value.begin = (currentPage - 1) * pageSize;
  list.value.pageSize = pageSize;
  data.value = await ApiUser.list(list.value);
};
const queryHandler = async () => {
  data.value = await ApiUser.list(list.value);
};
const changePwdHandler = async (data: API.User.ChangePwd) => {
  await ElMessageBox.confirm("确定要修改密码吗？", "提示", { type: "warning" });
  await ApiUser.ChangePwd(data);
  ElMessage.success("修改成功");
};
const removeHandler = async (user_name: string) => {
  await ElMessageBox.confirm("确定要删除吗？", "提示", { type: "warning" });
  await ApiUser.remove(user_name);
  ElMessage.success("删除成功");
  queryHandler();
};
</script>

<template>
  <el-form label-width="80px">
    <el-form-item label="用户名称">
      <el-input
        v-model="list.user_name"
        placeholder="请输入内容"
        :prefix-icon="Search"
      ></el-input>
    </el-form-item>
    <el-form-item label="用户角色">
      <el-select
        v-model="list.role_id"
        placeholder="--请选择--"
        style="width: 200px"
      >
        <el-option label="未分配" :value="0"></el-option>
        <el-option label="全部" :value="-1"></el-option>
        <el-option
          v-for="item in roles"
          :key="item.role_id"
          :label="item.role_name"
          :value="item.role_id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryHandler()">查询</el-button>
      <el-button type="success" @click="addRef?.begin()">增加</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data?.list" class="table">
    <el-table-column type="index" label="序号" width="80pox"></el-table-column>
    <el-table-column label="用户名" prop="user_name"></el-table-column>
    <el-table-column label="用户角色" prop="role_name">
      <template #default="{ row }">
        {{
          roles?.find((item) => item.role_id === row.role_id)?.role_name ??
          "未分配"
        }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="info" @click="removeHandler(row.user_name)"
          >删除</el-button
        >
        <el-button type="warning" @click="ConfigRoleRef?.begin(row)"
          >角色分配</el-button
        >
        <el-button
          type="danger"
          @click="
            changePwdHandler({ user_name: row.user_name, user_pwd: '123456' })
          "
          >重置密码</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
      layout="jumper,prev, pager, next,->,total,sizes"
      :total="data?.total"
      :page-sizes="[1, 3, 5, 7]"
      v-model:page-size="list.pageSize"
      @change="changePageHandler"
    >
    </el-pagination>
  </div>
  <user-add ref="addRef" @save="queryHandler"></user-add>
  <user-config-role ref="ConfigRoleRef" @save="queryHandler"></user-config-role>
</template>

<style scoped lang="scss">
.el-form {
  display: flex;
}
.page {
  position: absolute;
  bottom: 20px;
  width: calc(100% - 40px);
}
</style>
